

var ctx;
var canvas;
var width,height;
var linewidth = 20;
var angel = 20;
 
var movestep = 0 ;
 
function setCanvans(context,cvs)
{
    ctx = context;
    canvas = cvs;
 
    //console.log(canvas.width,canvas.height);
}
 
function clearAll()
{
    ctx.clearRect(0, 0, canvas.width, canvas.height);
}
 
function repainter()
{
    clearAll();
    angel = Math.random()*360;
    angel = angel.toFixed(0);
 
    //水形波纹
    drawWaterRipple();
 
}
 
 
function drawWaterRipple()
{
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle="red"
    ctx.fillStyle = "#BFF8F9"
 
    var stratx,endx;
    var straty,endy;
    var i = Math.random()*5;
    var length = 100*5;
 
    ctx.moveTo(100,100);
    for (var j = 0; j < length; j+=5)
    {
        if (j == 0)
        {
           stratx = 100;
           straty = 100+Math.sin(i)*10;
           //ctx.moveTo(stratx,straty);
        }
        ctx.lineTo(100+j,100+Math.sin(i)*10);
        endx = 100+j;
        endy = 100+Math.sin(i)*10;
        i+=0.15;
    }
    endy = 300;
    ctx.lineTo(endx,endy+200);
    ctx.lineTo(stratx,endy+200);
    ctx.lineTo(stratx,straty);
    ctx.fill();
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle="green"
    ctx.arc(349,100,248,0,Math.PI);
    ctx.stroke();
}


